<template>
  <van-nav-bar title="发布选择" left-arrow @click-left="goBack" />
  <div class="banner">
    <p>海量用户 · 快速出租 · 保护隐私</p>
    <p>手机号加密处理，防止骚扰！</p>
  </div>
  <van-cell-group title="居民住">
    <van-cell title="整套出租" label="出租整套住宅房屋公寓"  is-link @click="Zhengtao" />
    <van-cell title="单间/合租" label="出租住宅房屋中的单间" is-link @click="Danjian"/>
    <van-cell title="短租/日租" label="按天出租的房子" value="即将开放" />
  </van-cell-group>

  <van-cell-group title="商业用">
    <van-cell title="商铺出租" label="出租商场、底商、摊位、柜台等" value="即将开放" />
    <van-cell title="生意转让" label="连同房屋、设备、装修等出租" value="即将开放" />
  </van-cell-group>

  <p class="footer">发布出租仅为个人服务，不提供经纪人发房服务</p>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import 'animate.css';

const router = useRouter();

// 跳转整套
const Zhengtao = () => {
  router.push({
    name: 'zhengtao', 
  });
};
// 跳转单间
const Danjian = () => {
  router.push({
    name: 'danjian',
  });
};

// 点击左侧箭头返回首页的函数
const goBack = () => {
  router.push('/home');
};
</script>

<style scoped>
.banner {
  background: linear-gradient(to right, #ffa726, #ff7043);
  color: white;
  text-align: center;
  padding: 15px;
}
.footer {
  text-align: center;
  font-size: 12px;
  color: #888;
  margin-top: 20px;
}
</style>